<template>
  <div style="border: 1px solid #d3dce6">
    <!--TODO 作者文章发表量排行榜-->
    <h3 align="center">作者文章发表量排行榜</h3>
    <el-divider></el-divider>
    <div v-for="(item,index) in userList" :key="index">
      <h3 align="center">
        <span style="padding: 15px;font-size: 25px" class="inline-block">{{index+1}}</span>
        <el-avatar shape="square" size="medium" :src="item.header" class="inline-block"></el-avatar>
        <!--<a style="padding: 15px" class="inline-block" @click="toAuthor(item.userName)">{{item.userName}} ({{item.blogCount}})</a>-->
        <router-link :to="{path: '/Author/'+item.userName, query: {userId: item.userId}}" style="padding: 15px;text-decoration: none" >{{item.userName}}（{{item.blogCount}}篇）</router-link>
      </h3>
      <el-divider></el-divider>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Left',
  data () {
    return {
      value: new Date(),
      userList: []
    }
  },
  created () {
    this.getTopFiveUser()
  },
  methods: {
    getTopFiveUser () {
      this.$axios.get('/getTopFiveUser').then(respone => {
        this.userList = respone.data
        // console.log(this.userList)
      }).catch(err => {
        console.log(err)
      })
    },
    toAuthor (userName) {
      this.$router.push('/Author/' + userName)
    }
  }
}
</script>
<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .box-card {
    width: 300px;
  }
  .inline-block{
    display: inline-block;
    vertical-align: middle;
  }
</style>
